<template>
  <div class="gl_contentBox gl_heightFull">
    <div v-if="flag" class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :span="5.5">
          <p>上课时间</p>
          <el-date-picker v-model="freeDay" type="daterange" range-separator="至" start-placeholder="请选择日期" end-placeholder="请选择日期" size="mini" value-format="yyyy-MM-dd" style="width:100%" @change="changeAttendance" />
        </el-col>
        <el-col :span="4">
          <p>所在班级</p>
          <el-input v-model="Api_GET_ClubCoachCoachTeachingLogsQO.ClassName" clearable placeholder="请输入班级名称" size="mini" @change="getrecord()" />
        </el-col>
        <el-col :span="4">
          <p>授课课程</p>
          <el-input v-model="Api_GET_ClubCoachCoachTeachingLogsQO.CourseName" clearable size="mini" placeholder="请输入课程名称" @change="getrecord()" />
        </el-col>
        <el-col :md="4">
          <p>上课教室</p>
          <el-input v-model="Api_GET_ClubCoachCoachTeachingLogsQO.ClassroomName" clearable size="mini" placeholder="请输入教室名称" @change="getrecord()" />
        </el-col>
        <el-col :span="2.5">
          <el-button type="primary" style="margin-top:25px" size="mini" @click="getrecord()">筛选</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button type="warning" style="margin-top:25px" size="mini" :loading="btnDownLoading" @click="exportstudent()">导出记录</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-if="flag" style="margin-top:20px">
      <el-table v-loading="tableLoading" class="gl_table_noBorder" size="mini" :data="tableData">
        <el-table-column type="index" label="序号" align="center" width="100" />
        <el-table-column label="签到时间" :min-width="100">
          <template slot-scope="{row}">
            <span v-if="row.checkInDateTime">
              {{ row.checkInDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="班级名称" prop="className" />
        <el-table-column label="授课课程" prop="courseName" />
        <el-table-column label="上课时间" align="center" :min-width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.courseDate">
              <span>{{ scope.row.courseDate | FormatDate('yyyy-MM-dd') }}</span>
              <span>
                {{ 10 > scope.row.startHour ? '0' + scope.row.startHour : scope.row.startHour }}:{{ 10 > scope.row.startMinute ? '0' + scope.row.startMinute : scope.row.startMinute }} -
                {{ 10> scope.row.endHour ? '0' + scope.row.endHour : scope.row.endHour }}:{{ 10 > scope.row.endMinute ? '0' + scope.row.endMinute : scope.row.endMinute }}
              </span>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column label="上课教室" prop="classroomName" />
        <el-table-column label="授课模式" prop="teachingMode" />
        <el-table-column label="实到人数" prop="studentCount" align="center" />
        <el-table-column label="销课课时" prop="classPeriod" align="center" />
      </el-table>
    </div>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubCoachCoachTeachingLogsQO.Page"
        :page-size="Api_GET_ClubCoachCoachTeachingLogsQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import { api_GET_ClubCoachCoachTeachingLogs } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubCoachCoachTeachingLogsQO } from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      btnDownLoading: false,
      GetStudentInput: {},
      tableLoading: false,
      freeDay: '',
      totalPage: 0,
      Api_GET_ClubCoachCoachTeachingLogsQO: new Api_GET_ClubCoachCoachTeachingLogsQO(),
      paymentTime: [],
      flag: true,
      tableData: []
    };
  },
  watch: {
    freeDay: {
      calassList: [],
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length !== 0) {
          this.changeProportion(val);
        } else {
          this.yearList = [];
        }
      }
    }
  },
  created() {
    this.getrecord();
  },
  methods: {
    check() {
      this.$router.push({ name: 'CoachType' });
    },
    getrecord(page) {
      this.tableLoading = true;
      this.Api_GET_ClubCoachCoachTeachingLogsQO.IncludeDeleted = true; // type: boolean
      this.Api_GET_ClubCoachCoachTeachingLogsQO.CoachId = this.$route.query.id;
      this.Api_GET_ClubCoachCoachTeachingLogsQO.IncludeClass = true; // type: boolean
      this.Api_GET_ClubCoachCoachTeachingLogsQO.IncludeCourse = true; // type: boolean
      this.Api_GET_ClubCoachCoachTeachingLogsQO.IncludeClassroom = true; // type: boolean
      this.Api_GET_ClubCoachCoachTeachingLogsQO.Sorting = 'CourseDate,StartHour,StartMinute DESC';
      this.Api_GET_ClubCoachCoachTeachingLogsQO.Page = page || 1;
      this.Api_GET_ClubCoachCoachTeachingLogsQO.SkipCount = (this.Api_GET_ClubCoachCoachTeachingLogsQO.Page - 1) * this.Api_GET_ClubCoachCoachTeachingLogsQO.MaxResultCount;
      api_GET_ClubCoachCoachTeachingLogs(this.Api_GET_ClubCoachCoachTeachingLogsQO).then(res => {
        console.log(res);
        this.tableLoading = false;
        this.tableData = res.items;
        this.totalPage = res.totalCount;
      });
    },
    // 获取时间
    changeProportion(val) {
      console.log(val);
      this.Api_GET_ClubCoachCoachTeachingLogsQO.StartDateTime = val[0];
      this.Api_GET_ClubCoachCoachTeachingLogsQO.EndDateTime = val[1];
      this.GetStudentInput.StartDateTime = val[0];
      this.GetStudentInput.EndDateTime = val[1];
      this.getrecord();
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubCoachCoachTeachingLogsQO.MaxResultCount = MaxResultCount;
      this.getrecord();
    },
    pageIndexChange(currentPage) {
      this.getrecord(currentPage);
    },
    // 切换考勤日期
    changeAttendance (val) {
      const _start = val ? val[0] : null;
      const _end = val ? val[1] : null;
      this.Api_GET_ClubCoachCoachTeachingLogsQO.StartDateTime = _start;
      this.Api_GET_ClubCoachCoachTeachingLogsQO.EndDateTime = _end;
      this.GetStudentInput.StartDateTime = _start;
      this.GetStudentInput.EndDateTime = _end;
      this.getrecord();
    },
    exportstudent() {
      this.GetStudentInput.Sorting = 'creationTime DESC';
      this.GetStudentInput.Page = this.Api_GET_ClubCoachCoachTeachingLogsQO.Page;
      this.GetStudentInput.CoachId = this.$route.query.id;
      this.GetStudentInput.IncludeClass = true;
      this.GetStudentInput.IncludeCourse = true;
      this.GetStudentInput.IncludeClassroom = true;
      this.GetStudentInput.IncludeDeleted = true;
      this.GetStudentInput.ClassName = this.Api_GET_ClubCoachCoachTeachingLogsQO.ClassName;
      this.GetStudentInput.CourseName = this.Api_GET_ClubCoachCoachTeachingLogsQO.CourseName;
      this.GetStudentInput.ClassroomName = this.Api_GET_ClubCoachCoachTeachingLogsQO.ClassroomName;
      this.GetStudentInput = JSON.stringify(this.GetStudentInput);
      var that = this;
      this.btnDownLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '上课记录' + '.xlsx';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { reportName: 'CoachTeachingLog', GetCoachTeachinglogsInput: this.GetStudentInput }, WEB_CONFIG.VUE_APP_SWAGGER_HALL_BASE).then(res => {
        this.btnDownLoading = false;
        this.GetStudentInput = {};
      }).catch(error => {
        this.GetStudentInput = {};
        this.btnDownLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    }
  }

};
</script>

<style>

</style>
